import {ScrollView} from 'react-native-gesture-handler';
import {WhiteSpace, Button, Flex, List, Drawer, InputItem, PickerView, Modal, Provider, Toast} from '@ant-design/react-native';
import axios from 'axios';
import React, {Component} from 'react';
import {Image, StyleSheet, Text, View, Alert} from 'react-native';
import Albums from '~/pages/home/album/Album';
import {getBankByParkingId, getBankLoanByBankId} from '~/api/bank';
import {GetBankMaterialsList} from '~/api/owner';
import {UploadOwnerFile, saveBankApply} from '~/api/owner';

export default class Reapply extends Component {
    static navigationOptions = {
        title: '0首付填资料',
    };

    constructor(props) {
        super(props);
        this.state = {
            id: this.props.navigation.getParam('params'),
            orderid: this.props.navigation.getParam('orderid'),
            projectId: this.props.navigation.getParam('projectId'),
            sea: [],
            sealoan: [],
            monthlyinterestrate: '0.35%',
            monthlysupply: '3000',
            visible2: false,
            visible: false,
            bankName: '选择银行',
            bankId: 0,
            loanName: '选择金融产品',
            loanId: 0,
            visible3: false,
            files: [],
            username: '',
            idcard: '',
            cardID: [],
            BankFileID: [],
            shengfen: [],
            zhengxin: [],
            hukou: [],
            jiehun: [],
            fangchan: [],
            load: true,
            // values: 1,
        };
        //获取上传图片对应ID
        GetBankMaterialsList().then((r) => {
            if (r.code === 0) {
                this.setState({
                    cardID: r.data,
                });
                // Alert.alert('成功');
            } else {
                Alert.alert('失败');
            }
        });
        getBankByParkingId(this.state.id).then((r) => {
            if (r.code === 0) {
                let list = [];
                r.data.forEach((item) => {
                    list.push({
                        label: item.BankName,
                        value: item.BankDataID,
                    });
                });
                this.setState({
                    sea: list,
                });
                if (this.state.sea.length > 0) {
                    getBankLoanByBankId(this.state.id, this.state.sea[0].value).then((r) => {
                        if (r.code === 0) {
                            let loanlist = [];
                            r.data.forEach((item) => {
                                loanlist.push({
                                    label: item.LoanName,
                                    value: item.BankLoanID,
                                });
                            });
                            this.setState({
                                sealoan: loanlist,
                            });
                        } else {
                            Alert.alert(r.msg);
                        }
                    });
                }
            } else {
                Alert.alert(r.msg);
            }
        });
        this.onChange = (value) => {
            let item = this.state.sea.find((item) => item.value === value[0]);
            this.setState({
                bankName: item.label,
                bankId: value[0],
            });
            getBankLoanByBankId(this.state.id, value[0]).then((r) => {
                if (r.code === 0) {
                    let loanlist = [];
                    r.data.forEach((loanli) => {
                        loanlist.push({
                            label: loanli.LoanName,
                            value: loanli.BankLoanID,
                        });
                    });
                    this.setState({
                        sealoan: loanlist,
                        loanName: loanlist[0].label,
                    });
                } else {
                    Alert.alert(r.msg);
                }
            });
        };
        this.onChanges = (values) => {
            if (values != '' && values != undefined) {
                let item = this.state.sealoan.find((item) => item.value === values[0]);
                this.setState({
                    loanName: item.label,
                    loanId: values[0],
                });
            }
        };
        this.saveBankApply = () => {
            var idcard_regx = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
            if (this.state.username === '') {
                Alert.alert('姓名不能为空');
            } else if (this.state.idcard === '') {
                Alert.alert('身份证不能为空');
            } else if (this.state.bankName === '选择银行') {
                Alert.alert('请选择银行');
            } else if (this.state.loanName === '选择金融产品') {
                Alert.alert('请选择金融产品');
            } else if (this.state.shengfen.length === 0) {
                Alert.alert('请上传身份证图片');
            } else if (this.state.zhengxin.length === 0) {
                Alert.alert('请上传征信证图片');
            } else if (this.state.hukou.length === 0) {
                Alert.alert('请上传户口证图片');
            } else if (this.state.jiehun.length === 0) {
                Alert.alert('请上传结婚证图片');
            } else if (this.state.fangchan.length === 0) {
                Alert.alert('请上传房产证图片');
            } else {
                if (idcard_regx.test(this.state.idcard)) {
                    saveBankApply({
                        BankApplyID: 0,
                        ParkingOrderID: this.state.orderid,
                        BankLoanID: this.state.loanId,
                        OwnerName: this.state.username,
                        OwnerCardID: this.state.idcard,
                        BankFileID: this.state.BankFileID,
                    }).then((r) => {
                        if (r.code === 0) {
                            Alert.alert('提交成功');
                        } else {
                            Alert.alert(r.msg);
                        }
                    });
                } else {
                    Alert.alert('请输入正确得身份证号码');
                }
            }
        };
        this.onClose2 = () => {
            this.setState({
                visible2: false,
            });
        };
        this.onClose = () => {
            this.setState({
                visible: false,
            });
        };
        this.onPress = () => {
            this.setState({
                visible3: true,
            });
        };
        //图片上传
        this.onUpload = (index, files) => {
            UploadOwnerFile(this.state.cardID[index].BankMaterialID, files).then((r) => {
                if (r.code === 0) {
                    for (let i = 0; i < r.data.length; i++) {
                        switch (index) {
                            case 0:
                                let shengfenzheng = this.state.shengfen;
                                shengfenzheng.push(r.data[i].id);
                                this.setState({
                                    shenfen: shengfenzheng,
                                });
                                break;
                            case 1:
                                let zhengxins = this.state.zhengxin;
                                zhengxins.push(r.data[i].id);
                                this.setState({
                                    zhengxin: zhengxins,
                                });
                                break;
                            case 2:
                                let hukous = this.state.hukou;
                                hukous.push(r.data[i].id);
                                this.setState({
                                    zhengxin: hukous,
                                });
                                break;
                            case 3:
                                let jiehuns = this.state.jiehun;
                                jiehuns.push(r.data[i].id);
                                this.setState({
                                    jiehun: jiehuns,
                                });
                                break;
                            case 4:
                                let fangchans = this.state.fangchan;
                                fangchans.push(r.data[i].id);
                                this.setState({
                                    fangchan: fangchans,
                                });
                                break;
                        }
                        let BankFileIDs = this.state.BankFileID;
                        BankFileIDs.push(r.data[i].id);
                        this.setState({
                            BankFileID: BankFileIDs,
                        });
                    }
                    if (this.state.shengfen.length != 0 && this.state.zhengxin.length != 0 && this.state.hukou.length != 0 && this.state.jiehun.length != 0 && this.state.fangchan.length != 0) {
                        this.setState({
                            load: false,
                        });
                    }
                } else {
                    Alert.alert('上传失败，原因：' + r.msg);
                }
            });
        };
    }

    setUsername = (text) => {
        this.setState({
            username: text,
        });
    };
    setIdcard = (text) => {
        this.setState({
            idcard: text,
        });
    };

    render() {
        return (
            <>
                <ScrollView style={{flex: 1}}>
                    <View
                        style={{
                            width: '100%',
                            alignItems: 'center',
                            padding: 8,
                            flexDirection: 'row',
                            backgroundColor: '#FFFFFF',
                        }}>
                        <Text style={styles.textsize}>请选择银行：</Text>
                        <Button
                            style={{width: '50%'}}
                            onPress={() => {
                                this.setState({visible2: true});
                                if (this.state.bankId === 0) {
                                    this.setState({
                                        bankId: this.state.sea[0].value,
                                        bankName: this.state.sea[0].label,
                                    });
                                }
                            }}>
                            {this.state.bankName}
                        </Button>
                        <Modal popup visible={this.state.visible2} animationType="slide-up" onClose={this.onClose2}>
                            <View
                                style={{
                                    paddingVertical: 20,
                                    paddingHorizontal: 20,
                                }}>
                                <PickerView onChange={this.onChange} value={[this.state.bankId]} data={this.state.sea} cols={1} />
                            </View>
                            <Button type="primary" onPress={this.onClose2}>
                                确定
                            </Button>
                        </Modal>
                    </View>
                    <View
                        style={{
                            width: '100%',
                            alignItems: 'center',
                            padding: 8,
                            flexDirection: 'row',
                        }}>
                        <Text style={styles.textsize}>请选择金融产品：</Text>
                        <Button
                            style={{width: '50%'}}
                            onPress={() => {
                                this.setState({visible: true});
                                if (this.state.loanId === 0) {
                                    if (this.state.sealoan.length > 0) {
                                        this.setState({
                                            loanId: this.state.sealoan[0].value,
                                            loanName: this.state.sealoan[0].label,
                                        });
                                    }
                                }
                            }}>
                            {this.state.loanName}
                        </Button>
                        <Modal popup visible={this.state.visible} animationType="slide-up" onClose={this.onClose}>
                            <View
                                style={{
                                    paddingVertical: 20,
                                    paddingHorizontal: 20,
                                }}>
                                <PickerView onChange={this.onChanges} value={[this.state.loanId]} data={this.state.sealoan} cols={1} />
                            </View>
                            <Button type="primary" onPress={this.onClose}>
                                确定
                            </Button>
                        </Modal>
                    </View>
                    <View
                        style={{
                            width: '100%',
                            alignItems: 'center',
                            flexDirection: 'row',
                            marginTop: 19,
                        }}>
                        <View style={{width: '25%', alignItems: 'center'}}>
                            <Text style={styles.textsize}>姓名：</Text>
                        </View>
                        <View width="100%">
                            <List>
                                <InputItem onChange={this.setUsername} placeholder="请输入姓名" >姓名:</InputItem>
                            </List>
                        </View>
                    </View>
                    <View
                        style={{
                            width: '100%',
                            alignItems: 'center',
                            marginTop: 19,
                            flexDirection: 'row',
                        }}>
                        <View style={{width: '25%', alignItems: 'center'}}>
                            <Text style={styles.textsize}>身份证号：</Text>
                        </View>
                        <View width="70%">
                            <List>
                                <InputItem maxLength={18} onChange={this.setIdcard} placeholder="请输入身份证号" />
                            </List>
                        </View>
                    </View>
                    <View
                        style={{
                            width: '100%',
                            padding: 8,
                            flexDirection: 'row',
                            wrap: 'wrap',
                        }}>
                        <View style={{width: '30%', marginTop: 10}}>
                            <Text style={styles.textsize}>请上传身份证:</Text>
                        </View>
                        <Flex wrap={'wrap'} style={{width: '70%'}}>
                            <Albums
                                onSelect={(files) => {
                                    this.onUpload(0, files);
                                }}
                            />
                        </Flex>
                    </View>
                    <View
                        style={{
                            width: '100%',
                            padding: 8,
                            flexDirection: 'row',
                            wrap: 'wrap',
                            marginTop: 10,
                        }}>
                        <View style={{width: '30%', marginTop: 10}}>
                            <Text style={styles.textsize}>请上传征信:</Text>
                        </View>
                        <Flex wrap={'wrap'} style={{width: '70%'}}>
                            <Albums
                                onSelect={(files) => {
                                    this.onUpload(1, files);
                                }}
                            />
                        </Flex>
                    </View>
                    <View
                        style={{
                            width: '100%',
                            padding: 8,
                            flexDirection: 'row',
                            wrap: 'wrap',
                            marginTop: 10,
                        }}>
                        <View style={{width: '30%', marginTop: 10}}>
                            <Text style={styles.textsize}>请上传户口本:</Text>
                        </View>
                        <Flex wrap={'wrap'} style={{width: '70%'}}>
                            <Albums
                                onSelect={(files) => {
                                    this.onUpload(2, files);
                                }}
                            />
                        </Flex>
                    </View>

                    <View
                        style={{
                            width: '100%',
                            padding: 8,
                            flexDirection: 'row',
                            wrap: 'wrap',
                            marginTop: 10,
                        }}>
                        <View style={{width: '30%', marginTop: 10}}>
                            <Text style={styles.textsize}>请上传结婚证：</Text>
                        </View>
                        <Flex wrap={'wrap'} style={{width: '70%'}}>
                            <Albums
                                onSelect={(files) => {
                                    this.onUpload(3, files);
                                }}
                            />
                        </Flex>
                    </View>
                    <View
                        style={{
                            width: '100%',
                            padding: 8,
                            flexDirection: 'row',
                            wrap: 'wrap',
                            marginTop: 10,
                        }}>
                        <View style={{width: '30%', marginTop: 10}}>
                            <Text style={styles.textsize}>请上传房产证：</Text>
                        </View>
                        <Flex wrap={'wrap'} style={{width: '70%'}}>
                            <Albums
                                onSelect={(files) => {
                                    this.onUpload(4, files);
                                }}
                            />
                        </Flex>
                    </View>
                    <Button
                        style={{width: '100%'}}
                        type="warning"
                        disabled={this.state.load}
                        onPress={() => {
                            this.saveBankApply();
                        }}>
                        下一步
                    </Button>
                </ScrollView>
            </>
        );
    }
}
const styles = StyleSheet.create({
    textsize: {
        fontSize: 15,
        marginTop: 10,
    },
    container: {
        flex: 1,
    },
    images: {
        width: 153,
        height: 97,
        marginTop: 19,
        marginLeft: 15,
    },
});
